import React, { Component } from "react";
// withRouter是一个高阶组件，可以让那些没有路由信息的组件拿到路由信息
import {
  Link,
  Route,
  Switch,
  withRouter,
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from "react-router-dom";

// class Home extends Component {
//   render() {
//     return <div>这是home页面</div>;
//   }
// }
const Home = (props) => {
  console.log(props);
  return <div>这是home页面</div>;
};

class About extends Component {
  render() {
    console.log(this.props);
    return <div>这是about页面</div>;
  }
}
// const About = (props) => {
//   return <div>这是about页面</div>;
// };

// class Mine extends Component {
//   render() {
//     return <div>这是mine页面</div>;
//   }
// }
const Mine = (props) => {
  return <div>这是Mine页面</div>;
};

// class Classify extends Component {
//   render() {
//     console.log(this.props);
//     return <div>这是Classify页面</div>;
//   }
// }
// const Classify2 = withRouter(Classify);
// const Classify = withRouter((props) => {
//   console.log(props);
//   return <div>这是Mine页面</div>;
// });
const Classify = (props) => {
  const history = useHistory();
  console.log(history);

  const location = useLocation();
  console.log(location);

  const match = useRouteMatch();
  console.log(match);

  const params = useParams();
  console.log(params);

  return <div>这是Mine页面</div>;
};

class App extends Component {
  state = {};
  render() {
    return (
      <>
        <h2>路由的渲染方式</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/mine">我的</Link>
          </li>
          <li>
            <Link to="/classify">分类</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 渲染组件的方式有很多种 */}
          {/* component是最常规的一种,既可以渲染函数组件，也可以渲染类组件，都可以去得到路由的信息 */}
          <Route path="/home" component={Home}></Route>

          {/* 还可以使用render的方法来渲染组件 */}
          {/* render属性只能渲染函数组件，不能渲染类组件 */}
          {/* render可以写函数，就可以写逻辑判断 */}
          <Route
            path="/about"
            render={(props) => {
              if (3 > 1) {
                return <About {...props} />;
              }
              // else {
              //   return <Login />;
              // }
            }}
          ></Route>

          {/* 还可以使用children的方式来渲染组件 */}
          {/* children在没有Switch的情况下，无论url是否匹配都渲染 */}
          {/* 在有Switch的情况下，跟render的效果一模一样 */}
          <Route path="/mine" children={Mine}></Route>

          {/* 还可以直接使用插槽的方式 */}
          {/* 可以渲染函数组件和类组件 */}
          {/* 不能直接路由信息 */}
          <Route path="/classify">
            <Classify />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
